<template>
  <div>
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="发起人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <ZSelectUserByDep :button="false" placeholder="请选择发起人" v-model="queryParam['createBy@IN']" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <vxe-grid
        id="CandidateTask"
        ref="vxeTable"
        v-bind="gridOptions"
        :row-config="{keyField:'code'}"
      >
        <template #action="{ row }">
          <a href="javascript:;" v-if="row.assignee" @click="handleComplete(row)">办理</a>
          <a-popconfirm v-else title="确定拾取该任务吗?" @confirm="() => handleClaim(row)">
            <a href="javascript:;">拾取</a>
          </a-popconfirm>
        </template>
      </vxe-grid>
    </div>
    <TaskPendingModal @ok="modalFormOk" ref="modalForm" />
  </div>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { postAction } from '@/services/manage'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import TaskPendingModal from './TaskPendingModal'
export default {
  name: 'CandidateTask',
  mixins: [VxeTableListMixin],
  components: { ZSelectUserByDep, TaskPendingModal },
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        { title: '流程名称', field: 'processDefinitionName' },
        { title: '当前审批人', field: 'assignee', formatter: 'dictText' },
        { title: '节点名称', field: 'name' },
        { title: '流程发起人', field: 'procStartUserId', formatter: 'dictText' },
        { title: '流程开始时间', field: 'createTime' },
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      url: {
        list: '/camunda/task/candidate/page',
        claim: '/camunda/task/claim/'
      },
      toolbarConfig: {
        buttons: [],
        import: false
      }
    }
  },
  methods: {
    handleClaim(row) {
      postAction(this.url.claim + row.id).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.loadData()
        }
      })
    },
    handleComplete(row) {
      this.$refs.modalForm.show(row)
    }
  }
}
</script>

